<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>活动信息</title>
    <#include "../../common/link.ftl">
    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/travelnotes.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/system/travelnotes.js"></script>
    <link href="/js/plugins/jqPaginator/jqPagination.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/plugins/jqPaginator/jq-paginator.min.js"></script>
    <script src="/js/plugins/js-cookie/js.cookie.min.js"></script>
    <style>
        body {
            overflow: hidden;
        }

        .list-item-box {

            display: flex;
            overflow: hidden;

            justify-content: flex-start;
            align-items: center;
        }

        .post-cover {

            padding: 5px;
            box-sizing: border-box;

        }

        .title-box {

            border: 10px;
            box-sizing: border-box;
           margin-left: 30px;

            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: start;
        }
        .title-link{
            padding-left: 15px;
            box-sizing: border-box;
            font-size: 24px;
            color: orangered;
        }
    </style>
    <script>
        $(function () {

        })
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <#include "../../common/navbarMember.ftl">
    <!--菜单回显-->
    <#assign currentMenu="activityMember"/>
    <#include "../../common/menuMember.ftl">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>活动列表</h1>
        </section>
        <section class="content">
            <div class="box">
                <!--高级查询--->
                <div style="margin: 10px;">
                    <form class="form-inline" id="searchForm" action="/activity/member/list.do" method="post">
                        <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <div class="form-group">
                            <label for="keyword">关键字：</label>
                            <input type="text" class="form-control" id="keyword" name="keyword" value="${qo.keyword!}"
                                   placeholder="请输入标题/社团/地点">
                        </div>
                        &nbsp;
                        <div class="form-group">
                            <label for="personStatus"> 活动人数：</label>
                            <select class="form-control" id="personStatus" name="personStatus">
                                <option value="-1">全部</option>
                                <option value="0">未满</option>
                                <option value="1">已满</option>
                            </select>
                            <script>
                                $("#personStatus").val(${qo.personStatus!});
                            </script>
                        </div>
                        &nbsp;
                        <div class="form-group">
                            <label for="applyStatus"> 报名：</label>
                            <select class="form-control" id="applyStatus" name="applyStatus">
                                <option value="-1">全部</option>
                                <option value="0">未开始</option>
                                <option value="1">报名中</option>
                                <option value="2">已结束</option>
                            </select>
                            <script>
                                $("#applyStatus").val(${qo.applyStatus!});
                            </script>
                        </div>
                        &nbsp;
                        <div class="form-group">
                            <label for="playStatus"> 活动：</label>
                            <select class="form-control" id="playStatus" name="playStatus">
                                <option value="-1">全部</option>
                                <option value="0">未开始</option>
                                <option value="1">活动中</option>
                                <option value="2">已结束</option>
                            </select>
                            <script>
                                $("#playStatus").val(${qo.playStatus!});
                            </script>
                        </div>
                        <button id="btn_query" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>
                            查询
                        </button>
                    </form>
                </div>
                <ul>
                    <#list page.list as activity>
                        <li class="post-item clearfix">
                            <br>
                            <input type="hidden" name="id" value="${activity.id}">

                            <div class="list-item-box">
                                <#-- 左边的图片-->
                                <div class="post-cover">
                                    <a href="/activity/member/detail.do?id=${activity.id}" target="_blank"
                                       class="title-link">
                                        <img class="lazy" width="150" height="100"
                                             src="${(activity.imgUrl)!'/images/default.jpg'}" style="display: inline;" /></a>
                                </div>

                                <div class="post-title yahei hasxjicon title-box">
                                    <div >
                                        <a href="/activity/member/detail.do?id=${activity.id}" class="title-link"
                                           target="_blank"
                                           style="color:black">${activity.title!}</a>
                                    </div>

                                    <div>
                                        <span class="sponsor"  style="font-size:16px">
                                            <img class="lazy url img-circle" src="${activity.url!'/images/default.jpg'}" style="height: 40px; width: 40px;" />
                                            主办方：<a href="javascript:;" target="_blank" rel="nofollow" style="color: black">${activity.sponsor!}</a>
                                        </span>
                                    </div>
                                    <div style="font-size:16px;">
                                        <span>1、报名时间：${(activity.applyStartTime?string('yyyy-MM-dd HH:mm:ss'))!} - ${(activity.endTime?string('yyyy-MM-dd HH:mm:ss'))!}</span><br>
                                        <span>2、活动时间：${(activity.applyStartTime?string('yyyy-MM-dd HH:mm:ss'))!} - ${(activity.applyEndTime?string('yyyy-MM-dd HH:mm:ss'))!}</span><br>
                                        <span>3、地点：${activity.site!}</li>
                                    <div>
                                    <div class="post-content" style="font-size:18px; margin-left: 15px;">
                                        ${activity.synopsis!}
                                    </div>
                                    </div>
                        </li>
                    </#list>
                </ul>
                <!--分页-->
            <#include "../../common/page.ftl">
            </div>
    </div>
    </section>
</div>
<#include "../../common/footer.ftl">
</div>

<!-- 大图显示 -->
<div id="ShowImage_Form" class="modal fade" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" >
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $(".url").click(function(){
            var src = $(this).attr("src");
            $("#ShowImage_Form .modal-body").html("<img src='"+src+"' class='carousel-inner img-responsive img-rounded' />");
            $("#ShowImage_Form").modal('show');
        })
    })
</script>

<style>
    #inputModal img{
        width: 570px !important;
    }
</style>
</body>
</html>
